import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, Space, Table, TreeSelect, Switch, message, Image} from 'antd';
import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable, {TableDropdown} from '@ant-design/pro-table';
import {PlusOutlined} from '@ant-design/icons';
import {getGoodsLists, setGoodsPutAway} from "@/services/ant-design-pro/goods";
import {history} from 'umi';

const Keyword = () => {

  const treeData = [
    {
      title: '文字消息',
      value: '',
    },
    {
      title: '图片消息',
      value: '',
    },
    {
      title: '图文消息',
      value: '',
    },
    {
      title: '声音消息',
      value: '',
    },
  ];
  const [search, setSearch] = useState({status: 1, include: 'productattrvalue'})
  const actionRef = useRef<ActionType>();

  const columns: ProColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false,
      align: 'center',
      width: 100,
    },
    {
      title: '关键字',
      dataIndex: 'product_name',
      search: false,
      align: 'center',
      width: 200,
    },
    {
      title: '回复类型',
      dataIndex: 'productattrvalue["ot_price"]',
      search: false,
      align: 'center',
      width: 200,
      render: (_, record) =>{

        return <span>{record?.productattrvalue?.ot_price ?? '未定义' }</span>
      }
    },
    {
      title: '是否显示',
      dataIndex: 'status',
      filters: true,
      onFilter: true,
      search: false,
      align: 'center',
      valueType: 'select',
      width: 100,
      render: (_, record) =>
        <Switch
          checkedChildren="显示"
          unCheckedChildren="隐藏"
          defaultChecked={record.status}
          onChange={async (state) => {
            console.log(state);
            setGoodsPutAway({
              ids: record.id,
              status: state ? 1 : 0,
            }).then(() => {
              message.success('操作成功！')
              actionRef.current.reload();
            })
          }
          }
        />
    },
    // {
    //   title: '库存',
    //   dataIndex: 'stock',
    //   search: false,
    //   align: 'center',
    //   width: 100,
    // },
    // {
    //   title: '排序',
    //   dataIndex: 'sort',
    //   search: false,
    //   align: 'center',
    //   width: 100,
    // },
    // {
    //   title: '商品分类',
    //   dataIndex: 'category_id',
    //   hideInTable: true,
    //   search: true,
    //   width: 100,
    //   renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
    //     if (type === 'form') {
    //       return null;
    //     }
    //     const status = form.getFieldValue('state');
    //     if (status !== 'open') {
    //       return (
    //         <TreeSelect
    //           style={{width: '100%'}}
    //           treeData={treeData}
    //           dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
    //           placeholder="请选择"
    //           treeDefaultExpandAll
    //           {...fieldProps}
    //         />
    //       );
    //     }
    //     return defaultRender(_);
    //   }
    //
    // },
    // {
    //   title: '关键字',
    //   dataIndex: 'search',
    //   search: true,
    //   hideInTable: true,
    //   placeholder:"请输入关键字",
    //   renderFormItem: (_, {defaultRender}) => {
    //     return defaultRender(_);
    //   },
    // },
    // {
    //   title: '销量',
    //   dataIndex: 'sales',
    //   align: 'center',
    //   search: false,
    //   width: 100,
    //   sorter: (a, b) => a.containers - b.containers,
    // },


    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => history.push('/manageGoods/editGoods/3433')}
        >
          编辑
        </a>,
        <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
          查看
        </a>,
        <TableDropdown
          key="actionGroup"
          onSelect={() => action?.reload()}
          menus={[
            {key: 'copy', name: '复制'},
            {key: 'delete', name: '删除'},
          ]}
        />,
      ],
    },
  ];
  return (
    <PageContainer
      header={{
        title: '关键字回复',
        breadcrumb: {},
      }}

      onTabChange={(key) => {
        switch (key) {
          case '1':
            setSearch({
              ...search, ...{
                status: 1
              }
            })

            break;
          case '2':
            setSearch({
              ...search, ...{
                status: 0
              }
            })
            break;
          case '3':
            setSearch({
              ...search, ...{
                status: 3,
              }
            })


            break;
          case '4':
            setSearch({
              ...search, ...{
                status: 4
              }
            })
            break;

          case '5':
            setSearch({
              ...search, ...{
                status: 5
              }
            })
            break;
        }
        actionRef.current.reload();

      }}
    >
      <ProTable
        columns={columns}
        actionRef={actionRef}

        request={async (params = {}, sort, filter) => {
          return getGoodsLists({...sort, ...filter, ...params, ...search});
        }}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle={
          <Button key="button" icon={<PlusOutlined/>} type="primary"
                  onClick={() => history.push('/manageGoods/addGoods')}>
            添加关键字
          </Button>
        }
        toolBarRender={() => [

        ]}
      />
    </PageContainer>

  );
};

export default Keyword;
